<template>
    <div class='funeral_item_select' :style="styles2">
       
        <div class='funeral_item_select_search'>
            <div style='padding-top:5px;padding-right:5px;'>
                <select-tree styles="width:160px !important;" slot="prepend" @input="changeTree"  :options="options" v-if="shows"></select-tree>
            </div>
        
            <div style="margin-top: 5px;flex:1">
                <el-input placeholder="请输入内容" @keyup.enter.native="goSearch" v-model="names" class="input-with-select" style='width:95%'>
                
                        
                
                    <el-button slot="append" icon="el-icon-search" @click="goSearch"></el-button>
                </el-input>
            </div>
        </div>
        <el-table
                :data="tableData"
                stripe
                style="width:100%;flex:1"
                width="100%"
                height="100%"
                @row-dblclick="funeralItemSelect"
                >
                <el-table-column
                
                label="项目编号"
                >
                <template slot-scope="scope">
                    <span v-if="scope.row.sf_ex53!=''">{{ scope.row.sf_ex53 }}</span>
                    <span v-else>{{ scope.row.sf_ex2 }}</span>
                </template>
                <!--template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                    <p>编号: {{ scope.row.sf_ex1 }}</p>
                    <p>名称: {{ scope.row.szi_ex1 }}</p>
                    <p>单价: {{ scope.row.szi_ex2 }}</p>
                    <p>备注: {{ scope.row.szi_ex6 }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.sf_ex1 }}</el-tag>
                    </div>
                    </el-popover>
                </template-->
                </el-table-column>
                <el-table-column
                prop="szi_ex1"
                label="项目名称"
                >
                
                
                </el-table-column>
                <el-table-column
                prop="szi_ex2"
                label="单价"
                >
                </el-table-column>
            
                <el-table-column
                prop="szi_ex3"
                label="单位" >
                </el-table-column>
                
            </el-table>
        </div>
</template>
<script>
import SelectTree  from '../input/SelectTree'
export default {
    name:'funeral_item_select',
    props:['type','styles','appid','data',"isfs","extype"],
    components: {
        SelectTree
    },
    data(){
        return{
            tableData:[],
            styles2:this.styles,
            options:[],
            pId:'',
            names:'',
            shows:false
        }
    },
    created(){
       // alert(2)
        let sef=this;
        
        this.$post(this.appid,"byg/funeral/getFuneralSfItem",{type:this.type,isfs:this.isfs,type3:escape(this.extype)}).then(data=>{
            sef.tableData=[];
            for(let i=0;i<data.item.length;i++){
                sef.tableData.push(data.item[i])
            }
            this.options=data.options;
            this.shows=true;
        })
        if(!this.styles){
        }
    },
     watch:{
        pId: function (val) {
            let sef=this;
            this.$post(this.appid,"byg/funeral/getFuneralSfItem",{type:this.type,pId:val,isfs:this.isfs,type3:escape(this.extype)}).then(data=>{
                sef.pId=val;
                sef.tableData=[];
                for(let i=0;i<data.item.length;i++){
                    sef.tableData.push(data.item[i])
                }
                
            })
        }/*,
        data:{
            handler: function (newVal) {
                alert(this.type)
                if(this.type=="warehouse"){
                    alert(this.pId)
                }
            },      
            deep: true    //深度监听
        }*/
    },
    methods:{
        changeTree(data){
            let item=JSON.parse(data);
            this.pId=item.value;
        },
        funeralItemSelect(row, column, event){
           // console.log(row);
           // this.$emit('funeralItemSelectEvent',JSON.stringify(row));
           let isOk=true;
           let items=this.data["item"];
           for(let i=0;i<items.length;i++){
               if(items[i].szi_ex8==row.szi_ex8)
                isOk=false;
           }
           if(isOk)
           this.$set(this.data["item"],this.data["item"].length,row)

           
        },
        addItemByName(name){
            let row=null;
            for(let i=0;i<this.tableData.length;i++){
                let szi_ex1=this.tableData[i].szi_ex1;
                if(szi_ex1==name)
                    row=this.tableData[i];
            }
            if(row!=null)
                this.$emit('funeralItemSelectEvent',JSON.stringify(row));
        },
        goSearch(){
            let sef=this;
            this.$post(this.appid,"byg/funeral/getFuneralSfItem",{type:this.type,pId:this.push,name:this.names,isfs:this.isfs,type3:escape(this.extype)}).then(data=>{
               
                sef.tableData=[];
                for(let i=0;i<data.item.length;i++){
                    sef.tableData.push(data.item[i])
                }
                
            })
        }
    }
}
</script>
<style scoped>
.funeral_item_select{
    width:100%;
    overflow:hidden;
    height:100%;
    display:flex;
    flex-direction: column;
}
.funeral_item_select_search{
    display:flex;
}
</style>